<template>
    <div class="container">
        <el-form label-width="120px" :model="form" style="width: 500px">
            <el-form-item
                label="用户名"
                prop="username"
                :rules="[
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-input
                    placeholder="请输入用户名"
                    v-model="form.username"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="密码"
                prop="password"
                :rules="[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]"
            >
                <el-input
                    type="password"
                    placeholder="请输入密码"
                    v-model="form.password"
                    @keydown.enter="submit"
                ></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="submit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
import 'element-plus/es/components/form/style/css';
import 'element-plus/es/components/form-item/style/css';
import 'element-plus/es/components/input/style/css';
import 'element-plus/es/components/button/style/css';
import { reactive } from 'vue';
import { Login } from '@/api/request';
import router from '@/router';
import store from '@/store';
import dayjs from 'dayjs';
const form = reactive({
    username: '',
    password: '',
});
const submit = () => {
    Login(form).then(res => {
        if (res.success) {
            // 登陆成功之后返回之前浏览的页面
            router.push('/');
            ElMessage.success('登陆成功');
            store.commit('setUserinfo', {
                ...res.data,
                expiresTime: dayjs().add(7, 'day'),
            });
        } else {
            // 登陆失败
            ElMessage.error(res.msg);
        }
    });
};
</script>

<style lang="less" scoped>
.container {
    width: 60%;
    margin: 0 auto;
    height: calc(100% - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
</style>
